<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="../css/mui.css">
        <link rel="stylesheet" href="./css/atom-one-light.css">
        <script src="./js/jquery-2.2.3.min.js"></script>
        <script src="./js/highlight.pack.js"></script>
        <style>
            body{padding:20px 50px;}
            .components a {
                float: left;
                margin: 0 30px 20px 0;
            }
            .cyan, .cyan a {
                color: #5062c2;
            }
            .blue, .blue a {
                color: #2599f2;
            }
            .purple, .purple a {
                color: #6f5499;
            }
            .green, .green a {
                color: #26a69a;
            }
        </style>
    </head>
    <body>
        <h3 style="color: #3f51b5">MUI 文档v1.0.0</h3>
        <br>
        <p>MUI是PC端的前端样式库，包括全局CSS样式和一系列组件。</p>
        <p>MUI不支持IE6，7，8等过时的浏览器。</p>
        <br><br>
        
        <h4>如何使用</h4>
        <br>
        <h5>1. 引入依赖</h5>
        <p>MUI采用 <a href="http://fontawesome.io/" target="_blank"> font-awesome</a> 作为字体图标。请在使用时引入。&nbsp;&nbsp;&nbsp;<a href="http://fontawesome.io/get-started/" target="_blank">如何使用</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://fontawesome.io/icons/">Icons</a></p>
        <p>MUI的javascript组件依赖 <a href="https://jquery.com/" target="_blank">jQuery</a>。建议使用2.0以上版本。&nbsp;&nbsp;&nbsp;<a href="./js/jquery-2.2.3.min.js">下载jQuery2.2.3</a></p>
        <br>
        <h5>2. 引入mui.css和mui.js</h5>
        <br>
        <pre><code>
    &lt;!doctype html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;meta charset="utf-8"&gt;
            &lt;link rel="stylesheet" href="your-path/font-awesome/css/font-awesome.css"&gt;
            &lt;link rel="stylesheet" href="your-path/mui.min.css"&gt;
            &lt;script src="your-path/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
            &lt;script src="your-path/mui.min.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;...&lt;/body&gt;
    &lt;/html&gt;
        </code></pre>
        <br>
        <p>注意：不要与其他样式库混用，以避免冲突。</p>
        <br>
        <br>
        
        <h4>下载</h4>
        <br>
        <br><br>
        
        <h4>样式&组件</h4>
        <br>
        <div class="components clearfix">
            <a href="./basic.html">基本样式</a>
            <a href="./button.html">Button 按钮</a>
            <a href="./grid.html">Grid 栅格</a>
            <a href="./table.html">Table 表格</a>
            <a href="./panel.html">Panel 面板</a>
            <a href="./tabs.html">Tabs 选项卡</a>
            <a href="./side_nav.html">SideNav 侧边导航</a>
            <a href="./input.html">Input 输入框</a>
            <a href="./radio_checkbox.html">Radio/Checkbox 单选框/复选框</a>
            <a href="./switch.html">Switch 开关</a>
            <a href="./select.html">Select 下拉选择</a>
            <a href="./datetimepicker.html">Datetimepicker 日期选择</a>
            <a href="./form.html">Form 表单</a>
            <a href="./label.html">Label 标签</a>
            <a href="./dropdown.html">Dropdown 下拉菜单</a>
            <a href="./dialog.html">Dialog 对话框</a>
            <a href="./message.html">Message 消息框</a>
            <a href="./tooltip.html">Tooltip 弹出消息</a>
            <a href="./loader.html">Loader 载入</a>
            <a href="./pop_confirm.html">PopConfirm 弹出确认</a>
            <a href="./pagination.html">Pagination 翻页</a>
            <a href="./steps.html">Steps 步骤条</a>
            <a href="./process.html">Process 进度条</a>
            <a href="./app.html">App</a>
        </div>
        <br>
            
        <script>
            $(document).ready(function() {
            $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
            });
            });
        </script>
    </body>
</html>